<style lang="scss" scoped>
.data {
    width: 100vw;
    background: url("../../static/images/index/index_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 99.9%;
    box-sizing: border-box;
    overflow: auto;
    .scroll-Y {
        width: 100%;
        padding: 0.8rem;
        box-sizing: border-box;
        overflow: auto;
        ::v-deep .u-tab-item {
            padding: 0 !important;
            padding-right: 1rem !important;
        }
    }
}
</style>

<template>
    <view class="data">
        <u-navbar-s></u-navbar-s>
        <view class="scroll-Y">
            <!-- top导航 -S -->
            <u-tabs :list="state.tabslist" :is-scroll="true" :current="state.current" @change="change" :showBar="false" :bgColor="''" :fontSize="'38'" :activeColor="'#000'"></u-tabs>
            <!-- top导航 -E -->
            <view>
                <!-- 切换页面 1 -S -->
                <view v-if="state.current == 0">
                    <view1></view1>
                </view>
                <!-- 切换页面 1 -E -->
                <!-- 切换页面 2 -S -->
                <view v-if="state.current == 1">
                    <view2></view2>
                </view>
                <!-- 切换页面 2 -E -->
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import view1 from "./view_1.vue";
import view2 from "./view_2.vue";
components: {
    view1;
    view2;
}
const state = reactive<{
    tabslist: Array;
    current: number;
}>({
    current: 0,
    tabslist: [
        {
            name: "影视短剧",
        },
        {
            name: "小说推文",
        },
    ],
});
onLoad(() => {
    getData().then(() => {
        localData();
    });
    localData();
});
onPullDownRefresh(() => {
    getData().then(() => {
        localData();
        uni.stopPullDownRefresh();
    });
});
// 请求数据
const getData = async () => {};
// 本地数据
const localData = () => {};
// 切换
const change = (index) => {
    state.current = index;
};
</script>
